<template>
  <div class="channel-edit" >
    <div class="my-channel channel">
      <van-cell :border='false' title="我的频道">
        <template>
          <van-button @click="isEdit = !isEdit" color="red" plain round size="mini">{{ isEdit ?
             '完成' : '编辑' }}</van-button>
        </template>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item
        :class="{active: index === ActiveIndex}"
        :icon="(isEdit && index!==0) ?'close' : ''"
        @click="onClickMyItem(index,item.id)"
        v-for="(item,index) in myChannels"
        :key="item.id"
        :text="item.name"/>
      </van-grid>
    </div>
     <div class="recommend-channel channel">
      <van-cell :border='false' title="推荐频道"></van-cell>
      <van-grid  direction="horizontal" icon-size="0.32rem" :gutter="10">
        <van-grid-item icon="plus"
        @click="addToMyChannels(item)"
        v-for="item in recommendChannels"
        :key="item.id"
        :text="item.name"  />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel.js'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  props: {
    myChannels: {
      type: Array,
      require: true
    },
    ActiveIndex: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },

  created () {
    this.loadAllChannels()
  },
  computed: {
    recommendChannels () {
      return this.allChannels.filter(channelsItem => {
        return !this.myChannels.some(mychannel => mychannel.id === channelsItem.id)
      })
    },
    ...mapState(['user'])
  },
  methods: {
    async loadAllChannels () {
      try {
        const { channels } = await getAllChannels()
        this.allChannels = channels
      } catch (error) {
        Toast('系统异常')
      }
    },
    async addToMyChannels (data) {
      this.myChannels.push(data)
      if (this.user) {
        try {
          await addUserChannel({
            id: data.id,
            seq: this.myChannels.length
          })
          Toast('添加成功')
        } catch (error) {
          Toast('添加失败')
        }
      } else {
        setItem('HMTT-CHANNELS', this.myChannels)
      }
    },
    deletestorage (id) {
      if (this.user) {
        // 已登录
        deleteUserChannel(id)
      } else {
        // 未登录
        setItem('HMTT-CHANNELS', this.myChannels)
      }
    },
    onClickMyItem (index, id) {
      if (this.isEdit === true) {
        if (index === 0) {
          return
        }
        if (index <= this.ActiveIndex) {
          this.$emit('update-active', this.ActiveIndex - 1, true)
        }
        this.myChannels.splice(index, 1)
        this.deletestorage(id)
      } else {
        this.$emit('update-active', index, false)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit{
  padding-top: 80px;

     .channel {
      /deep/.van-grid {
      .van-grid-item__content{
        width: 160px;
        height: 86px;
        background-color: #F4F5F6;
        border-radius: 6px;
        .van-grid-item__text{
          font-size: 24px;
          color: #222;
        }
        .van-grid-item__content::after{
          border: none;
          }
        }
      }
    }
  .my-channel{
    /deep/.van-grid-item__icon+.van-grid-item__text{
      margin-top: 0px;
    }
    /deep/.active{
      .van-grid-item__text{
        color:red !important;
      }
    }
    .van-cell{
      display: flex;
      align-items: center;
    }
    .van-button{
      width: 103px;
      height: 50px;
    }
    /deep/.van-icon-close{
      font-size: 32px;
      position: absolute;
      right: -10px;
      top: -10px;
    }
  }
}
</style>
